import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Button, Icon, Tooltip } from 'antd';
import moment from 'moment';
import SearchList from './SearchList/SearchList';
import ChannelModel from './ChannelModel/ChannelModel';
import { CommonTable } from 'components';
import { bindActionCreators } from 'redux';
import { channelListAction } from './index';
import { CopyToClipboard } from 'react-copy-to-clipboard';

class ChannelList extends Component {

    constructor(props) {
        super(props);
        this.state = {
            itemChannelId: null
        };
        const _this = this;
        this.columns =[
            {
                title: '渠道名称',
                dataIndex: 'name',
                key: 'name'
            },
            {
                title: '链接',
                dataIndex: 'url',
                key: 'url',
                render(text) {
                    return (
                        <div>
                            <span>{text}</span>
                            <CopyToClipboard text={text} onCopy={_this.onCopy}>
                                <Tooltip title={'点击复制'}>
                                    <span style={{marginLeft: '20px'}}><Icon type={'copy'}/></span>
                                </Tooltip>
                            </CopyToClipboard>
                        </div>

                    );
                }
            },
            {
                title: '生成时间',
                dataIndex: 'addTime',
                key: 'addTime',
                render(text) {
                    return moment(Number(text)*1000).format('YYYY-MM-DD');
                }
            },
            {
                title: '操作',
                dataIndex: 'id',
                key: 'id',
                render(text, record) {
                    return (
                        <div onClick={() => _this.modifyChannel(record)}>
                            <Icon type={'edit'}/>
                        </div>
                    );
                }
            },
        ];
        this.searchParams = {};
    }
    //添加渠道
    handleAddChannel = () => {
        const { changeModalVisible, changeModalInfo, info } = this.props;
        this.setState({ itemChannelId: null });
        changeModalVisible(true);
        changeModalInfo({ mobileNo:'', name: '', url: '/hs/api/v1/indexPage',enabled:1 });
    }
    //修改渠道
    modifyChannel = (record) => {
        const { id, mobileNo, url, name,enabled } = record;
        const { changeModalVisible, changeModalInfo, info } = this.props;
        this.setState({ itemChannelId: id });
        changeModalInfo({ mobileNo, name, url,enabled });
        changeModalVisible(true);
    }
    handleModalCancel = () => {
        const { changeModalVisible } = this.props;
        changeModalVisible(false);
    }

    handleModalOk = (obj) => {
        const { itemChannelId } = this.state;
        const { addChannel, updateChannel } = this.props;
        if(itemChannelId) {
            updateChannel({ ...obj, id: itemChannelId });
            return;
        }
        addChannel(obj);
    }

    handleSearch = (obj) => {
        let { time, url, name,enabled } = obj;
        const { getTableData } = this.props;
        let startTime = '', endTime = '';
        if(Array.isArray(time)) {
            [startTime, endTime] = time.map(item => item.format('YYYY-MM-DD'));
        }
        const params = { name,enabled, url, startTime, endTime, pageSize: 10, pageNum: 1 };
        this.searchParams = params;
        getTableData(params);
    }
    handlePageChange = (pagination) => {
        const { current, pageSize } = pagination;
        const { getTableData } = this.props;
        getTableData({ ...this.searchParams, pageSize, pageNum: current});
    }

    componentDidMount() {
        const { getTableData } = this.props;
        getTableData({ pageSize: 10, pageNum: 1 });
    }

    render() {
        const { tableData: { data, pagination }, loading, visible, info } = this.props;
        console.log(info)
        return (
            <div>
                <SearchList handleSearch={this.handleSearch}/>
                <Button type={'primary'} onClick={this.handleAddChannel}>添加渠道</Button>
                <CommonTable handlePageChange={this.handlePageChange} columns={this.columns} dataSource={data} pagination={pagination} loading={loading}/>
                <ChannelModel visible={visible} info={info} handleCancel={this.handleModalCancel} handleOk={this.handleModalOk}/>
            </div>
        );
    }
}

const mapStateToProps = (state) => {
    const { channelManageState: { channelListState } } = state;
    return {
        tableData: channelListState['data'],
        loading: channelListState['loading'],
        visible: channelListState['visible'],
        info: channelListState['modalInfo']
    }
}
const mapDispatchToProps = (dispatch) => {
    return bindActionCreators({
        getTableData: channelListAction.chlGetTableData,
        changeModalVisible: channelListAction.chlChangeModalVisible,
        changeModalInfo: channelListAction.chlChangeModalInfo,
        addChannel: channelListAction.chlAddTableData,
        updateChannel: channelListAction.chlUpdateTableData
    },dispatch)
}

export default connect(mapStateToProps, mapDispatchToProps)(ChannelList);